<template>
  <div class="login">
    <div class="login-con">
      <a-card title="欢迎登录">
        <div class="form-con">
          <a-form :model="formData" ref="formRef" :colon="false" autocomplete="off">
            <a-form-item label=" " name="username" :rules="[{ required: true, message: '不能为空' }]">
              <a-input placeholder="请输入账号" v-model:value="formData.username">
                <template #prefix>
                  <UserOutlined class="input-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item label=" " name="password" :rules="[{ required: true, message: '不能为空' }]">
              <a-input-password placeholder="请输入密码" v-model:value="formData.password">
                <template #prefix>
                  <LockOutlined class="input-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item :wrapper-col="{ span: 24 }" nostyle>
              <a-button type="primary" class="login-btn" :loading="loginLoading" @click="iLogin">登 录</a-button>
            </a-form-item>
          </a-form>
        </div>
        <p class="login-tip">请输入账号、密码后登录</p>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, Ref } from 'vue'
  import { loginApi } from '@/api/login'
  import * as formValidator from '@/utils/form-validator'
  import { message } from 'ant-design-vue'
  import { useRouter } from 'vue-router'
  import { loadingPromise } from '@/utils/tools'
  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
  import { useSystemStore } from '@/store/system'

  onMounted(() => {
    // 清空本地的信息存储
    localStorage.clear()
    sessionStorage.clear()
  })

  const router = useRouter()

  const formRef: Ref = ref()
  const loginLoading = ref<boolean>(false)
  const formData = reactive({
    username: 'admin',
    password: '123456'
  })

  // 登录
  const iLogin = async () => {
    if (!(await formValidator.formVerify(formRef))) return
    // 表单通过
    loginLoading.value = true
    let apiData = {
      ...formData
    }
    loginApi(apiData)
      .then(async res => {
        const { menuList } = res.data
        const systemStore = useSystemStore()
        systemStore.setUserInfo(res.data)
        systemStore.setMenuListFromApi(menuList)

        message.success('登录成功！')
        loginLoading.value = false
        await loadingPromise()
        router.replace({
          name: systemStore.indexPageObj.name
        })
      })
      .catch(err => {
        loginLoading.value = false
      })
  }
</script>

<style scoped lang="less">
  .login {
    width: 100vw;
    height: 100vh;
    background: url(~'@/assets/login/login-bg.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;

    &-con {
      position: absolute;
      right: 160px;
      top: 50%;
      transform: translateY(-60%);
      width: 320px;

      .form-con {
        padding: 10px 0 0;

        .input-icon {
          color: #808695;
        }

        .login-btn {
          width: 100%;
        }
      }

      .login-tip {
        font-size: 10px;
        text-align: center;
        color: #c3c3c3;
      }
    }
  }
</style>
